<template>
  <div :class="wrpCls">
    <a-space>
      <div class="todo_box">
        <a-button class="document text-white" type="link" @click="toTodo">
          {{ $t('all.autotext1694') }}
        </a-button>
        <span v-if="noTodoNumber" class="red"></span>
      </div>
      <a-button
        v-if="!userInfo.isAdmin"
        class="document text-white"
        type="link"
        @click="toFeedback"
      >
        {{ $t('all.autotext1493') }}
      </a-button>
      <a-icon
        class="right-content__icon text-white"
        type="question-circle"
        @click="toDocument"
      />
      <span>
        <!-- <a-badge :count="messageNum">
          <a-icon class="right-content__icon" type="bell" @click="clickMessage"/>
        </a-badge> -->
        <div class="todo_box">
          <a-icon
          class="right-content__icon text-white"
          type="bell"
          @click="clickMessage"
        />
        <span  v-if="unReadNum" class="red"></span>
        </div>

      </span>
      <avatar-dropdown
        :current-user="currentUser"
        class="ant-pro-global-header-index-action text-white"
      />
      <!-- <div class="role-container" v-if="$store.getters.roles.length">
        <span class="role-tag">{{ $store.getters.roles[0].name }}</span>
        <div class="arrow"></div>
      </div> -->
      <!-- <select-lang :class="prefixCls" /> -->
    </a-space>
  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'
import { apiRecordViewFAQ } from '@api/system/setting'
import { uploadLog } from '@/utils/log'
import { mapGetters } from 'vuex'

export default {
  name: 'RightContent',
  components: {
    AvatarDropdown
  },
  props: {
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      currentUser: {},
      messageNum: 0,
      isAdmin: 0
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo',
      noTodoNumber: 'noTodoNumber',
      unReadNum: 'unReadNum'
    }),
    wrpCls() {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${
          this.isMobile || !this.topMenu ? 'light' : this.theme
        }`]: true
      }
    },
    roleTag() {
      const hasName = this.$store.getters.role.name
      if (hasName) {
        return hasName
      } else {
        return ''
      }
    },
    navShow() {
      if (!this.$store.getters.roles.length) return false
      return ['SYS_ADMIN', 'PROJECT_ADMIN', 'SYS_FINANCE', 'SYS_BIZ'].includes(
        this.$store.getters.roles[0].code
      )
    }
  },
  mounted() {
    if (this.$store.getters.userInfo) {
      this.isAdmin = this.$store.getters.userInfo.isAdmin
    }
    setTimeout(() => {
      this.currentUser = {
        name: this.$store.getters.nickname,
        headimg: this.$store.getters.avatar
      }
    }, 1500)
    // 开启 轮训监听未读数量
    this.$globalVue.$emit('unReadMsgListener')
    // 监听返回未读数量
    this.$globalVue.$on('unReadMsgCount', this.updateUnReadMsgCount)
    // 头像同步更新
    this.$globalVue.$on('headUpdate', this.updateImageUrl)
  },
  destroyed() {
    this.$globalVue.$off('headUpdate')
    this.$globalVue.$off('unReadMsgCount')
  },
  methods: {
    uploadViewLog() {
      uploadLog(apiRecordViewFAQ)
    },
    toTodo() {
      this.$router.push({
        name: 'todo'
      })
    },
    toDocument() {
      if (this.isAdmin === 1) {
        // 系统操作手册
        window.open(
          'https://minio-cluster.primelifescience.com.cn/consent/a4d0e44e-3938-402d-b54c-74e068066cb3.pdf',
          '_blank'
        )
      } else {
        // 用户操作手册
        window.open(
          'https://minio-cluster.primelifescience.com.cn/payment/66b69fea-9a65-4f07-b72e-ef24187b3491.pdf',
          '_blank'
        )
      }
      this.uploadViewLog()
    },
    toFeedback() {
      this.$router.push({
        name: 'feedback'
      })
    },
    updateUnReadMsgCount(count) {
      this.messageNum = count
    },
    clickMessage() {
      this.$router.push({
        name: 'message',
        query: {
          form: 'header'
        }
      })
    },
    // 头像更新
    updateImageUrl() {
      this.currentUser.name = this.$store.getters.nickname
      this.currentUser.headimg = this.$store.getters.avatar
    }
  }
}
</script>
<style scoped lang="less">
.ant-pro-global-header-index-right {
  display: flex;
  align-items: center;
}
.message {
  position: relative;
  right: -2px;
  bottom: 1px;
  width: 20px;
  height: 25px;
  cursor: pointer;
}
.text-white {
  color: #fff;
}
.right-content__icon {
  font-size: 18px;
  margin-right: 15px;
  // &:hover {
  //   color: var(--var-primary-color)
  // }
}

.role-container {
  position: relative;
  display: inline-block;
  top: -2px;
}
.arrow {
  position: absolute;
  left: -12px;
  top: 43%;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right-color: #f88a16;
}
.role-tag {
  padding: 5px;
  border-radius: 3px;
  background-color: #f88a16;
}
.role-tag:empty + .arrow {
  display: none;
}
.role-tag:empty {
  display: none;
}
.todo_box {
  position: relative;
}
.red {
  width: 8px;
  border-radius: 50%;
  height: 8px;
  position: absolute;
  right: 10px;
  top: 18px;
  background: #f5222d;
}
</style>
